import React, { Component } from 'react';
import '../style/moblie.css'
import News from '../testRouter/news'
import Stu from '../testRouter/stu'
import My from '../testRouter/my'
import { HashRouter as Router, Route, Redirect, Switch,NavLink } from 'react-router-dom'
import {connect} from 'react-redux'
class Index extends Component {
    state = {}
    componentDidUpdate(nextProps,nextState){
        if(nextProps.title !==this.props.title ){
            document.title = this.props.title 
        }
    }
    render() {
        return (
            <Router>
                <div className='app'>
                    <div className='top'>
                        {this.props.title}
                    </div>
                    <div className='content'>
                        <Switch>
                            <Route path='/news' component={News}></Route>
                            <Route path='/my' component={My}></Route>
                            <Route path='/stu' component={Stu}></Route>
                            <Redirect from='/' to='/news'></Redirect>
                        </Switch>
                    </div>
                    <ul className='bottom'>
                        <li> <NavLink to='/news' activeClassName='active' onClick={this.props.changeTitle('首页')}>首页</NavLink>  </li>
                        <li> <NavLink to='/my'  activeClassName='active' onClick={this.props.changeTitle('分类')}>分类</NavLink> </li>
                        <li><NavLink to='/stu'  activeClassName='active' onClick={this.props.changeTitle('购物车')}>购物车</NavLink></li>
                    </ul>
                </div>
            </Router>
        );
    }
}
const dispatchToProps=dispactch=>{
    return {
        changeTitle(value){
            return ()=>{
                dispactch({
                    type:'changeTitle',
                    value
                })
            }
        }
    }
}
export default connect(state=>state,dispatchToProps)(Index);